<template>
	<view class="u-wrap u-p-l-30 u-p-r-30">
		<u-form :model="addModel" ref="form1">
			<u-form-item prop="typeName" label="类型:">
				<u-radio-group v-model="addModel.typeName">
					<u-radio @change="radioChange" active-color="#4BC26A;" v-for="(item, index) in typelist"
						:key="index" :name="item.name" :disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item prop="title" label="名称:">
				<u-input v-model="addModel.title" />
			</u-form-item>
			<u-form-item prop="categoryName" label-width="auto" label="物品类型:">
				<u-input @click="openBtn" v-model="addModel.categoryName" />
				<u-select v-model="show" mode="single-column" :list="categoryList" @confirm="confirm"></u-select>
			</u-form-item>
			<u-form-item prop="introduce" label-width="auto" label="简介:">
				<u-input v-model="addModel.introduce" />
			</u-form-item>
			<u-form-item prop="address" label-width="auto" :label="label+'地点:'">
				<u-input v-model="addModel.address" />
			</u-form-item>
			<u-form-item prop="userName" label-width="auto" :label="label+'人:'">
				<u-input v-model="addModel.userName" />
			</u-form-item>
			<u-form-item prop="phone" label-width="auto" :label="label+'人电话:'">
				<u-input v-model="addModel.phone" />
			</u-form-item>
			<u-form-item prop="image" label-width="auto" label="物品图片:">
			</u-form-item>
			<u-upload ref="imgRef" @on-change="onChange" @on-remove="onRemove" :action="action" :file-list="fileList"></u-upload>
		</u-form>
		<u-button @click="commit" shape="circle" :custom-style="customStyle" style="width: 100%;"
			type="success">确定编辑</u-button>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import http from '../../src/common/http.js'
	import {
		getSelectApi,
		editdApi
	} from '../../src/api/goods.js'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	//表单ref属性
	const form1 = ref()
	//图片上传的ref属性
	const imgRef = ref()
	//提交按钮样式
	const customStyle = reactive({
		marginTop: '50px'
	})
	const addModel = reactive({
		goodsId:'',
		userId:uni.getStorageSync("userId"),
		typeName:'',
		type: '',
		title: '',
		introduce: '',
		userName: '',
		phone: '',
		address: '',
		image: '',
		categoryId: '',
		categoryName: ''
	})
	//表单验证规则
	const rules = reactive({
		typeName: [{ required: true, message: '请选择类型', trigger: ['change'] }],
		title: [{ required: true, message: '请填写名称', trigger: ['change'] }],
		userName: [{ required: true, message: '请填写姓名', trigger: ['change'] }],
		phone: [{ required: true, message: '请填写电话', trigger: ['change'] }],
		address: [{ required: true, message: '请填写地址', trigger: ['change'] }],
		categoryName: [{ required: true, message: '请选择分类', trigger: ['change'] }],
		image: [{ required: true, message: '请上传图片', trigger: ['change'] }],
	})
	const typelist = [{
			name: '失物',
			value:'0',
			disabled: false
		},
		{
			name: '拾物',
			value:'1',
			disabled: false
		}
	]
	const action = ref(http.baseUrl + '/api/upload/uploadImage')
	const fileList = ref([])
	//存储图片的地址
	const imgUrl = ref([])
	//图片上传触发
	const onChange = (res, index, lists, name) => {
		console.log(res.data)
		let result = JSON.parse(res.data)
		console.log(http.baseUrl + result.data)
		imgUrl.value.push(http.baseUrl + result.data)
		//转为逗号分隔的字符串  aa.png,bb.png
		let url = "";
		for (let k = 0; k < imgUrl.value.length; k++) {
			url = url + imgUrl.value[k] + ','
		}
		// console.log(url)
		//末尾的逗号去掉
		addModel.image = url.substring(0, url.lastIndexOf(','))
		console.log(addModel)
	}
	//删除图片时触发
	const onRemove = (index, lists, name) => {
		console.log(index)
		//删除数组里面的数据
		imgUrl.value.splice(index, 1);
		let url = "";
		for (let k = 0; k < imgUrl.value.length; k++) {
			url = url + imgUrl.value[k] + ','
		}
		// console.log(url)
		//末尾的逗号去掉
		addModel.image = url.substring(0, url.lastIndexOf(','))
		console.log(addModel)

	}
	//下拉分类的状态
	const show = ref(false)
	//分类打开
	const openBtn = () => {
		show.value = true;
	}
	//分类数据类型
	const categoryList = ref([])
	//分类选择的确定
	const confirm = (e) => {
		console.log(e)
		addModel.categoryId = e[0].value;
		addModel.categoryName = e[0].label;

	}
	//获取分类数据
	const getSelect = async () => {
		let res = await getSelectApi()
		if (res && res.code == 200) {
			console.log(res)
			categoryList.value = res.data;
		}
	}
	//标识
	const label = ref('丢失')
	//类型单选按钮点击事件
	const radioChange = (e) => {
		console.log(e)
		if (e == '寻物') {
			label.value = '丢失'
		} else {
			label.value = '捡到'
		}
		//设置type的值
		for(let i=0;i<typelist.length;i++){
			if(e == typelist[i].name){
				addModel.type = typelist[i].value
			}
		}
	}
	
	//提交
	const commit = ()=>{
		form1.value.validate(async(valid)=>{
			if(valid){
				console.log(addModel)
				let res = await editdApi(addModel)
				if(res && res.code == 200){
					
					//跳转到对应的页面
					if(addModel.type == '0'){
						uni.switchTab({
							url:'../find/find'
						})
					}else{
						uni.switchTab({
							url:'../claim/claim'
						})
					}
					//清空表单
					form1.value.resetFields()
					imgUrl.value = [];
					addModel.image = '';
					fileList.value = [];
					imgRef.value.clear()
					
				}
			}
		})
	}
	onReady(() => {
		//设置表单验证规则
		form1.value.setRules(rules)
		//设置图片数据
		imgRef.value.lists = fileList.value
		getSelect()
	})
	onLoad((option)=>{
		let goods = JSON.parse(option.goods)
		//把编辑的数据回显
		Object.assign(addModel,goods)
		console.log(addModel)
		//类型回显
		for(let i=0;i<typelist.length;i++){
			if(typelist[i].value == goods.type){
				addModel.typeName = typelist[i].name
			}
		}
		//图片回显
		if(goods.image){
			//转换为数组
			let imgs = goods.image.split(",")
			for(let j=0;j<imgs.length;j++){
				let obj = {url:''}
				obj.url = imgs[j]
				fileList.value.push(obj)
			}
		}
	})
</script>

<style lang="scss">

</style>
